<template>
    <div class="lb-customer-question-edit">
        <top-nav :title="navTitle" :isBack="true"></top-nav>
        <div class="page-main">
            <el-form @submit.native.prevent :model="setForm" ref="setForm" label-width="120px" class='set-form'>
                <el-form-item label="问卷名">
                    <el-input v-model="setForm.title" placeholder="请输入问卷名"></el-input>
                    <lb-tool-tips>建议输入问卷名后立即点击确认按钮, 随后在问卷列表页右边点击编辑按钮来添加问题, 添加问题时如问题较多建议添加几个点击一次确认按钮以防数据丢失</lb-tool-tips>
                </el-form-item>
                <el-form-item label="添加问题">
                    <lb-button type='primary' @click="addQuestion" icon='el-icon-plus'>添加填空题</lb-button>
                </el-form-item>
                <el-form-item label="填空题" v-for="(item,index) in setForm.question" :key='index'>
                    <el-input v-model="item.title" placeholder="请输入问题"></el-input>
                    <lb-button type='danger' @click="delQuestionItem(index)">{{$t('action.delete')}}</lb-button>
                </el-form-item>
                <el-form-item>
                    <lb-button type='primary' @click="submitFormInfo">{{$t('action.submit')}}</lb-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      setForm: {
        id: '',
        title: '',
        question: []
      }
    }
  },
  created () {
    let {id} = this.$route.query
    this.navTitle = this.$t(id ? 'menu.QuestionnaireEdit' : 'menu.QuestionnaireAdd')
    if (id) {
      this.id = id
      this.getQuestionaireInfo()
    }
  },
  methods: {
    getQuestionaireInfo () {
      let {id} = this
      this.$api.getCustomerQuestionDetail({id}).then(res => {
        if (res.code === 200) {
          for (let key in this.setForm) {
            this.setForm[key] = res.data[key]
          }
        }
      })
    },
    submitFormInfo () {
      let {setForm} = this
      let result = setForm.question.every(item => {
        return item.title !== ''
      })
      if (!setForm.title) {
        this.$message.error('请输入问卷名再提交')
      } else if (!result) {
        this.$message.error('请输入完问题再提交')
      } else {
        let typeUrl = setForm.id ? 'editCustomerQuestionInfo' : 'addCustomerQuestionInfo'
        if (!setForm.id) delete setForm.id
        this.$api[typeUrl]({data: setForm}).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successSub'))
            this.$router.back(-1)
          }
        })
      }
    },
    addQuestion () {
      this.setForm.question.push({title: ''})
      console.log()
    },
    delQuestionItem (index) {
      this.setForm.question.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
    .lb-customer-question-edit{
        width: 100%;
        .page-main{
            .set-form{
                .el-input{
                    width: 300px;
                }
            }
        }
    }
</style>
